<!DOCTYPE html>
<html lang="en">
<head>
    <!-- CSS还未补充等之后学会了再补充 -->
    <meta charset="UTF-8">
    <title>Day01</title>
</head>
<body>
    <nav>
        <div style="background:white">
            <span><img src="img/1.png"></span>
            <span><a href="#">首页</a></span>
            <span><a href="#">所有课程</a></span>
            <span><a href="#">精选笔记</a></span>
            <span><a href="#">学霸榜单</a></span>
            <span><a href="#">学院贴吧</a></span>
        </div>
    </nav>
    <!-- 主体 -->
    <!-- 上半部分 -->
    <div style="background: #efefef;">
        <img src="img/2.png" style="float: center;">
        <h1>第一天：为什么有那么多人要做前端？</h1>
        <div>
            <span>人数</span>&nbsp;&nbsp;
            &nbsp;&nbsp;<span style="color:gray">有</span><span style="color:darkcyan">16484</span><span style="color:gray">人在学习该课程</span>
            &nbsp;&nbsp;<span style="color:darkcyan">3793</span><span style="color:gray">已完成该课程</span>
        </div>
        <div>
            <span>时间</span>&nbsp;&nbsp;
            &nbsp;&nbsp;<span style="color:gray">平均用时</span><span style="color:darkcyan">7.8</span><span style="color:gray">天</span>
        </div>
        <div>
            <span>关键词</span>
            &nbsp;<span style="color: gray;">HTML</span>
        </div>
    </div>
    <!-- 下半部分 -->
    <div style="background: #efefef;">
        <div style="font-size: 20px;">课程概述</div>
        <div style="font-size: 15px; color:red;">作业提交截止时间：09-01</div>
        <h1>第一天：为什么有那么多人要做前端？</h1>
        <h2>前言</h2>
        <p>首先要感谢在2017年6月13日到8月10日，陪伴我的十多位北京邮电大学的在校同学，他们付出了66天，每天2-4个小时，也许更多的时间，来和我们一起做了一个实验，在非工作压力的情况下，在校生如何才能更好地学习技术，我们尝试了一些方法，分成了很多个班进行了实验。有一些同学中途放弃，但也有一些同学陪伴我坚持了下来，并且最终让我们有了今年前端学院的新的基础课程。</p>
        <h2>课程背景</h2>
        <p>本基础课程，我们面向的是有一定计算机编程基础，在前端领域零基础或刚刚开始入门的同学，当然如果你是计算机编程零基础或者前端已经有一定学习经验，也欢迎参加，在知识内容上你可以根据自己情况进行增补和略过，但学习方法是一致的。</p>
        <h2>课程目标</h2>
        <p>第一天我们希望你完成后能够：</p>
        <ul>
            <li>做好预备奔跑的姿势</li>
            <li>开始爱上前端</li>
            <li>大概知道什么是Web，什么是HTML，CSS，JavaScript，如果您之前就知道，不妨可以做一些深入阅读</li>
        </ul>
        <h2>任务描述</h2>
        <h3>浏览</h3>
        <p>好的，我们开始吧，首先，请确认你有一个比较先进主流的浏览器，比如Chrome，然后用这个浏览器，我们来一起看一些美好的东西，依次浏览下面的网站（建议不要同时都打开）：</p>
        <ul>
            <a href="http://2014.artsy.net/">http://2014.artsy.net/</a><br>
            <a href="https://codepen.io/Yakudoo/full/rJjOJx">https://codepen.io/Yakudoo/full/rJjOJx</a><br>
            <a href="https://codepen.io/pissang/full/geajpX">https://codepen.io/pissang/full/geajpX</a><br>
            <a href="https://codepen.io/tsuhre/full/BYbjyg">https://codepen.io/tsuhre/full/BYbjyg</a><br>
            <a href="https://wangyasai.github.io/Stars-Emmision/">https://wangyasai.github.io/Stars-Emmision/</a><br>
            <a href="https://pissang.github.io/papercut-box-art/">https://pissang.github.io/papercut-box-art/</a>
            <a href="https://demo.marpi.pl/biomes/"></a>
            <a href="https://pissang.github.io/voxelize-image/"></a>
            <a href="http://echarts.baidu.com/examples/index.html#chart-type-globe"></a>
            <a href="https://tympanus.net/Development/AudioVisualizers/（推荐戴耳机）"></a>
        </ul>
        <p>看完之后有没有觉得很酷炫，上面这些网站效果都是使用Web前端技术实现的。有不少前端开发者选择入行的原因，就是希望通过技术做出类似这些美好的东西，用技术带给用户最优美的体验。不知道你有没有开始期待着一天，你也可以用技术实现如此美妙的画面。</p>
    </div>
</body>
</html>